<template>
  <div class="box" @mousemove="mouseMove">
    <p>clientX--{{ X }}</p>
    <p>clientY--{{ Y }}</p>
    <button @click="changeDog">点击切换</button>
    <img width="200" :src="url" alt="" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from "vue";
  export default defineComponent({
    name: "App",
  });
</script>

<script setup lang="ts">
  import axios from "axios";
  //鼠标移动
  const X = ref(0);
  const Y = ref(0);
  const mouseMove = (e: MouseEvent) => {
    console.log(e);
    X.value = e.clientX;
    Y.value = e.clientY;
  };
  onMounted(() => {
    console.log("鼠标移动的初始化");
  });

  //点击切换狗
  const url = ref("");
  async function changeDog() {
    const result = await axios.get("https://dog.ceo/api/breeds/image/random");
    url.value = result.data.message;
  }
  onMounted(() => {
    console.log("切换狗狗的初始化");
  });
</script>
<style scoped>
  .box {
    width: 500px;
    height: 400px;
    border: 1px solid red;
  }
</style>
